
<template>
  <div class="hore-list" >
    <!--tag 属性规定router-link标签解析成什么标签-->
    <router-link tag="button" to="/hore/add" class="btn btn-primary">添加英雄</router-link>
    <hr />
    <table class="table table-striped" v-show="isShow">
      <thead>
        <tr>
          <th>ID</th>
          <th>英雄名称</th>
          <th>英雄性别</th>
          <th>创建时间</th>
          <th>操作</th>
        </tr>
      </thead>
      <!-- 这里的transition-group标签需要解析成tbody标签才能使ui框架设置的样式生效 -->
        <transition-group tag="tbody">
          <tr v-for="item in horeList" :key="item.id" >
              <td>{{item.id}}</td>
              <td>{{item.horeName}}</td>
              <td>{{item.gender}}</td>
              <td>{{item.time|formatTime}}</td>
              <td>
                <button @click="$router.push('/hore/edit/' + item.id)" class="btn btn-success" style="margin-right:10px">编辑</button>
                <button class="btn btn-danger" @click="delHore(item.id)">删除</button>
              </td>
          </tr>
          <tr v-if="horeList.length===0">
            <td colspan="5" style="text-align:center">暂无数据</td>
          </tr>
        </transition-group>
        
        
      
    </table>
    <router-view v-show="!isShow"></router-view>
  </div>
</template>

<script>
import moment from "moment";
export default {
  // 组件初始化执行
  created() {
    this.getHoreList();
  },
  data() {
    return {
      horeList: [],
      isShow:true
    };
  },
  methods: {
    getHoreList() {
      this.$http.get("/hore").then(res => {
        this.horeList = res.data;
      });
    },
    delHore(id) {
      if (confirm("确定删除???")) {
        this.$http.delete(`/hore/${id}`).then(() => {
          // this.getHoreList();
          const index  = this.horeList.findIndex(item=>item.id===id)
          this.horeList.splice(index,1)
        });
      }
    },
    addHore() {
        this.isShow = false;
      this.$router.push("/addHore");
      
    }
  },
  filters: {
    formatTime(time) {
      return moment(new Date(time)).format("YYYY-MM-DD HH:mm:ss");
    }
  }
};
</script>
<style>
.v-enter,.v-leave-to{
  opacity: 0;
  transform: translateY(50px);
  transform: translateX(-600px);
}
.v-enter-active,.v-leave-active{
  transition: all 1s;
  
 
}
</style>

